<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html { font-size: 100%; height: 100%;}
body { font: 0.8em Verdana,Arial,Helvetica,sans-serif; background-color: #f5f5f5; color: #333; }
h3 {color: navy;}

/* LOG BLOCK */
#console {
  height:100px;
  padding: 0.3em;
  margin: 0.2em 0 2em;
  background-color: #E0EFE2;
  overflow-y:auto;
  border:1px solid green;
  font:8pt 'courier new';
}
#console .msg { border-bottom: 1px solid #c3dfc7; }
#console .msg em { color: #a8cfad; }
#console .msg strong { color: #f5f5f5; font-weight: bold; background-color:green;}
#logsummary { margin-bottom: 1em; padding: 1ex; border: 1px solid #000; font-weight: bold; }
#logtable { width:100%; border-collapse: collapse; border: 1px dotted #666; }
#logtable td, #logtable th { text-align: left; padding: 3px 8px; border: 1px dotted #666; }
#logtable .passed { background-color: #cfc; } 
#logtable .failed, #logtable .error { background-color: #fcc; }
#logtable .nameCell { cursor: pointer; }
</style>
</head>

<script type='text/javascript' src='lib/prototype.js'></script>
<script type='text/javascript' src='lib/eventdispatcher.js'></script>
<script type='text/javascript' src='src/hotkey.js'></script>

<script type='text/javascript'>
function log(msg) {
  $('console').innerHTML += "<div class='msg'> >> "+msg+" </div>" ;
  $('console').scrollTop  = 99999; 
}

function listHotKeys() {
  log('HOTKEYS: '+ $H(ActiveKeyboard.getInstance().getListenerChain()).keys().join('; '))
}

document.observe('dom:loaded',function(){
  // get and enable
  ActiveKeyboard.getInstance().enable();
  
  // attach Ctrl + Up
  ActiveKeyboard.getInstance().addShortCut('X',            function(e) {log('who said x'); });
  // attach Ctrl + Up
  ActiveKeyboard.getInstance().addShortCut('Ctrl + UP ',   function(e) {Event.stop(e); log('control + UP pressed'); });
  // double modifiers
  ActiveKeyboard.getInstance().addShortCut('Shift+Alt+w',  function(e) {log('alt + shift + "w" pressed');});
  // ESC
  ActiveKeyboard.getInstance().addShortCut('ESC',          function(e) {log('ESCAPE where ?');});
  // F1 
  ActiveKeyboard.getInstance().addShortCut('F1',           function(e) {Event.stop(e); log('loading HELP'); listHotKeys()});

});
</script>

<body>
  [<a href="#" onclick="$('console').update()">Clear</a>]
  <div id="console"></div>

  <p>Click F1 to list active keyboard keys .. have fun!</p>
</body>
</html>

